<template>
  <!-- 图片分类 -->
  <view class="category">
    <!-- 标签栏 -->
    <view class="category-tab">
      <!-- 标签栏标题 -->
      <view class="category-tab-title">
        <!-- uniSegmentedControl是uni-ui的分段器（标签栏）组件 -->
        <uni-segmented-control :current="current"
          :values="items.map(v=>v.title)" @clickItem="onClickItem"
          style-type="text" active-color="#d4237a">
        </uni-segmented-control>
      </view>
      <!-- 右侧搜索图标 -->
      <view class="iconfont iconsearch"></view>
    </view>
    <!-- 如果要flex布局要加上enable-flex属性 -->
    <scroll-view class="category-content" scroll-y enable-flex
      @scrolltolower="handleScrollTolower">
      <view class="cate-item" v-for="item in vertical" :key="item.id">
        <image :src="item.thumb" mode="widthFix"></image>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { uniSegmentedControl } from '@dcloudio/uni-ui'
export default {
  data() {
    return {
      items: [
        {
          title: '最新',
          order: 'new'
        },
        {
          title: '热门',
          order: 'hot'
        }
      ],
      // 标签默认是第一个
      current: 0,
      // 请求参数
      params: {
        limit: 30,
        skip: 0,
        order: 'new'
      },
      id: 0,
      // 页面显示图片数据的数组
      vertical: [],
      hasMore: true
    }
  },
  components: {
    uniSegmentedControl
  },
  methods: {
    // 标签栏点击
    onClickItem(e) {
      /**
       * 1 根据被点击的标题，切换标题
       * 2 切换order
       * 3 重新发送请求
       */
      if (this.current !== e.currentIndex) {
        // 先前的标签不等于最新的标签，则切换
        this.current = e.currentIndex
        this.hasMore = true
        this.params.skip = 0
        this.vertical = []
        this.params.order = this.items[this.current].order
        this.getList()
      }
    },
    // 获取数据
    async getList() {
      const res = await this.request({
        url: `http://157.122.54.189:9088/image/v1/vertical/category/${this.id}/vertical`,
        data: this.params
      })

      if (res.res.vertical.length === 0) {
        this.hasMore = false
        uni.showToast({
          title: '没有更多了~',
          icon: 'none'
        })
        return
      }
      this.vertical = [...this.vertical, ...res.res.vertical]
    },
    // 触底，加载更多
    handleScrollTolower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit
        this.getList()
      } else {
        uni.showToast({
          title: '没有更多了~',
          icon: 'none'
        })
      }
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.category-tab {
  position: relative;
  box-shadow: 0 3rpx 10rpx 2rpx rgba(100, 100, 100, 0.2);
  z-index: 1;
  .category-tab-title {
    width: 60%;
    margin: 0 auto;
  }
  .iconsearch {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
  }
}
.category-content {
  display: flex;
  flex-wrap: wrap;
  padding-left: 5rpx;
  height: calc(100vh - 36px);
  .cate-item {
    width: 33.33%;
    border-right: 5rpx solid #fff;
    border-bottom: 5rpx solid #fff;
  }
}
</style>